<template>
  <div class="module-inner flex column common-module-bg">
    <div class="item flex module-title">
      <div class="left flex-center">累计出货：</div>
      <div class="right">
        {{ moduleData.goods }}
      </div>
    </div>
    <div class="item flex">
      <div class="left flex-center">稳定运行：</div>
      <div class="right">
        {{ moduleData.runtime }}
      </div>
    </div>
    <div class="item flex">
      <div class="left flex-center">赋能厂房：</div>
      <div class="right">
        {{ moduleData.factory }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Accumulative',
  components: {},
  props: {
    moduleData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {}
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
    }
  }
}
</script>

<style lang='scss' scoped>
@import "src/styles/conversion.scss";

.module-inner {
  height: 100%;
  background: url("/image/ah_image.png") no-repeat center;

  .item {
    flex: 1;
    @include vw(20);

    .left {
      flex: 3;
      color: rgb(79, 142, 195);
    }

    .right {
      flex: 2;
      color: #fff;
      display: flex;
      align-items: center;
    }
  }
}
</style>
